<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>炫彩小球案例2</title>
    <style>
        div {
            position: absolute;
            border-radius: 50%;
        }
        body{
            background-color: black;
        }
    </style>
</head>

<body>
    <script>
        var zj=['red','blue','yellow','black','pink','green']
        function fu(x, y) {
            var r = 20;
            var dx=parseInt(Math.random()*20-10);
            var dy=parseInt(Math.random()*20-10);
            var op=1;
            var ys = zj[parseInt(Math.random()*8)];
            var ball = document.createElement('div');
            ball.style.width = `${r * 2}px`;
            ball.style.height = `${r * 2}px`;
            ball.style.left = `${x - r}px`;
            ball.style.top = `${y - r}px`;
            ball.style.backgroundColor = ys;
            document.body.appendChild(ball);
            setInterval(function () {
                x += dx;
                y += dy;
                r+=0.1;
                op-=0.01;
                ball.style.width = `${r * 2}px`;
                ball.style.height = `${r * 2}px`;
                ball.style.left = `${x - r}px`;
                ball.style.top = `${y - r}px`;
                ball.style.opacity=op;
                if(op<0){
                   document.body.removeChild(ball);
                }
            }, 20);

        }
        document.onmousemove = function (e) {
             x=e.clientX;
             y=e.clientY;
            fu(x, y);
        }
    </script>
</body>

</html>